import React, {useState} from "react";
import { ChromePicker } from "react-color";
import CommonFlex from "../CommonFlex/index";

import "./index.less";

type Color  = {
    label: string; // 标题文本
    type: string;
    value: string;
}
interface Props {
    color: Color;
    onChange: (value: number) => void
};

const ColorPickFlex = (props: Props) => {
    const {color, onChange} = props;
    const [isOpen, setOpen] = useState(false);
    const handleChange = () => {
        setOpen(true);
    };
    const cover = {
        position: "fixed",
        top: 0,
        right: 0,
        bottom: 0,
        left: 0,
    };
    const closeModeClick = () => {
        setOpen(false);
    };
    const pickChange = (e: any) => {
        onChange(e.hex);

    };
    return (
        <CommonFlex>
            {color.label}
            <div className="color-flex-box">
                 <div className="color-flex-option">
            
                 </div>
                 {isOpen && <div style={ cover } onClick={closeModeClick}></div>}
                 {   isOpen && <div className="color-flex-input-pick">
                     <ChromePicker color={color.value} onChange={pickChange}></ChromePicker></div> 
                 }
                 <div className="color-flex-input" style={{"background": color.value}} onClick={handleChange}></div>
            </div>
        </CommonFlex>
    );
};
export default ColorPickFlex;